<template>
  <div>
    <!-- 添加题目类型按钮 -->
    <el-button type="primary" @click="openDialog">添加题目类型</el-button>

    <!-- 批量删除按钮 -->
    <el-button type="danger" @click="batchDelete" :disabled="selectedTypes.length === 0">批量删除</el-button>

    <!-- 题目类型表格 -->
    <el-table :data="questionTypes" stripe style="width: 100%" v-model:selection="selectedTypes">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="type_id" label="ID" width="80"></el-table-column>
      <el-table-column prop="type_name" label="题目类型"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editType(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteType(scope.row.type_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑题目类型的弹窗 -->
    <el-dialog :title="isEdit ? '编辑题目类型' : '添加题目类型'" :visible.sync="dialogVisible">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="类型名称">
          <el-input v-model="formData.type_name" placeholder="请输入题目类型名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from '@/utils/request';

export default {
  data() {
    return {
      questionTypes: [], // 题目类型数据
      dialogVisible: false, // 控制弹窗的显示
      formData: {
        type_id: null,
        type_name: '',
      }, // 表单数据
      isEdit: false, // 是否为编辑状态
      selectedTypes: [], // 选中的题目类型（用于批量删除）
    };
  },
  methods: {
    // 打开弹窗
    openDialog() {
      this.resetFormData();
      this.dialogVisible = true;
      this.isEdit = false;
    },

    // 重置表单数据
    resetFormData() {
      this.formData = {
        type_id: null,
        type_name: '',
      };
    },

    // 保存题目类型（新增或编辑）
    handleSave() {
      if (this.isEdit) {
        // 编辑题目类型
        axios.put(`/originalQuestionType/${this.formData.type_id}`, this.formData)
            .then(response => {
              this.fetchQuestionTypes();
              this.$message.success("题目类型已更新");
            })
            .catch(error => {
              this.$message.error("编辑题目类型失败");
            });
      } else {
        // 新增题目类型
        axios.post('/originalQuestionType', this.formData)
            .then(response => {
              this.fetchQuestionTypes();
              this.$message.success("题目类型已添加");
            })
            .catch(error => {
              this.$message.error("新增题目类型失败");
            });
      }
      this.dialogVisible = false;
    },

    // 编辑题目类型
    editType(row) {
      this.formData = {...row};
      this.dialogVisible = true;
      this.isEdit = true;
    },

    // 删除单个题目类型
    deleteType(id) {
      axios.delete(`/originalQuestionType/${id}`)
          .then(response => {
            this.fetchQuestionTypes();
            this.$message.success("题目类型已删除");
          })
          .catch(error => {
            this.$message.error("删除题目类型失败");
          });
    },

    // 批量删除题目类型
    batchDelete() {
      const ids = this.selectedTypes.map(item => item.type_id);
      axios.delete('/originalQuestionType', {data: {ids}})
          .then(response => {
            this.fetchQuestionTypes();
            this.$message.success("题目类型批量删除成功");
          })
          .catch(error => {
            this.$message.error("批量删除题目类型失败");
          });
    },

    // 获取所有题目类型
    fetchQuestionTypes() {
      axios.get('/originalQuestionType')
          .then(response => {
            this.questionTypes = response.data;
          })
          .catch(error => {
            this.$message.error("获取题目类型失败");
          });
    },
  },
  mounted() {
    this.fetchQuestionTypes(); // 初始化时加载题目类型
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
